<!DOCTYPE html>
<html>
	<!--信息录入--> 
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.but{
				margin: -11px 206px;
				display: inline-block;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div>
				<span>姓名</span>
				<input type="text"  placeholder="请输入学生姓名" v-model="name"/>
			</div>
			<div>
				<span>年龄</span>
				<input type="text"  placeholder="请输入学生年龄" v-model="age"/>
			</div>
			<div>
				<span>性别</span>
				<select v-model="sex">
					<option value="男">男</option>
					<option value="女">女</option>
				</select>
			</div>
			<div>
				<span>手机号</span>
				<input type="text" placeholder="请输入手机号" v-model="phone"/>
			</div>  
			<button @click="Onclick">创建新用户</button>
			<table>
				<thead>
					<tr>
						<td>姓名</td>
						<td>年龄</td>
						<td>性别</td>
						<td>手机号</td>
						<td>操作</td>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(person,index) in persons" :key="index">
						<td>{{person.name}}</td>
						<td>{{person.age}}</td>
						<td>{{person.sex}}</td>
						<td>{{person.phone}}</td>
						<td><button @click="Onclickdelete(index)">删除</button></td>
					</tr>
					
				</tbody>
				
			</table>
			
			
		</div>
		
	</body>
	<script type="text/javascript" src="../js/vue.js" ></script>
	
	<script>
		
		new Vue({
			el:"#app",
			data:{
				persons:[
					{name:"老刘1",age:18,sex:'男',phone:'1234'},
					{name:"老刘2",age:11,sex:'男',phone:'1232'},
					{name:"老刘3",age:12,sex:'女',phone:'1233'},
					{name:"老刘4",age:13,sex:'男',phone:'1235'},
				],
				name:"",
				age:"",
				sex:"",
				phone:""
			},
			methods:{
				Onclick:function(){
						if(this.name==""||this.age==""||this.sex==""||this.phone==""){
							alert("请不要留空值")
						}else{
							var newmember={name:this.name,age:this.age,sex:this.sex,phone:this.phone}
							this.persons.push(newmember)
							this.name="",
							this.age="",
							this.sex="",
							this.phone=""
						}
				},
				Onclickdelete:function(index){
					this.persons.splice(index,1)
				}
			}
		})
			
				//删除的方法  数组.splice(index,1)
	</script>
</html>
